<template>
  <view>
	  <view class="flex-col page">
	    <view class="flex-col justify-start self-stretch relative group">
	      <view class="flex-col justify-start">
	        <view class="flex-col section">
	          <view class="flex-row justify-between group_2">
	            <view class="flex-row items-center">
	              <view class="group_3"></view>
	              <image
	                class="image_4"
	                src="https://ide.code.fun/api/image?token=678483434ae84d00122350a5&name=91a9c70448b5e314d65895844717858b.png"
	              />
	            </view>
	            <view class="flex-row group_4">
	              <image
	                class="image"
	                src="https://ide.code.fun/api/image?token=678483434ae84d00122350a5&name=54f7ec7681b48b1af08c8139164ca46a.png"
	              />
	              <image
	                class="image_2 ml-6"
	                src="https://ide.code.fun/api/image?token=678483434ae84d00122350a5&name=41522ab87790e6c1d53d94f6d868ba45.png"
	              />
	              <image
	                class="image_3 ml-6"
	                src="https://ide.code.fun/api/image?token=678483434ae84d00122350a5&name=9ed1efe1fe78ee13cea5678c0770105a.png"
	              />
	            </view>
	          </view>
	          <view class="flex-col mt-22-5">
	            <view class="flex-row justify-between items-center group_2">
	              <view class="flex-row items-center section_3">
	                <text class="text text_2">Gabblebean</text>
	                <image
	                  class="shrink-0 image_6 ml-85"
	                  src="https://ide.code.fun/api/image?token=678483434ae84d00122350a5&name=8e48219d2e197f9a0ed8eca3313c7e17.png"
	                />
	              </view>
	              <image
	                class="image_5"
	                src="https://ide.code.fun/api/image?token=678483434ae84d00122350a5&name=0ec411db53b4a449956c5354c8c3cc6f.png"
	              />
	            </view>
	            <view class="flex-row mt-14">
	              <image
	                class="shrink-0 image_7"
	                src="https://ide.code.fun/api/image?token=678483434ae84d00122350a5&name=7675109ad011d150621c866c0cdce034.png"
	              />
	              <view class="flex-col flex-1 self-start group_5">
	                <text class="self-start text text_3">Gabblebean</text>
	                <text class="self-stretch text text_4">你可以变换Gabblebean的角色， 让她更有趣</text>
	                <view class="flex-row self-stretch group_6">
	                  <view class="flex-row section_4">
	                    <image
	                      class="shrink-0 image_8"
	                      src="https://ide.code.fun/api/image?token=678483434ae84d00122350a5&name=e9cd0f4c3bc4cfdb1ed6f84873cfb32e.png"
	                    />
	                    <text class="font text text_6 ml-7">94%</text>
	                  </view>
	                  <view class="flex-row items-center section_5 ml-10">
	                    <image
	                      class="shrink-0 image_2"
	                      src="https://ide.code.fun/api/image?token=678483434ae84d00122350a5&name=544834f2c17e35ed9a6f1061400444cb.png"
	                    />
	                    <text class="font text text_5 ml-5-5">正常</text>
	                  </view>
	                </view>
	              </view>
	            </view>
	          </view>
	        </view>
	      </view>
	      <view class="flex-col justify-start section_2 pos">
	        <view class="flex-col section_6" >
	          <view class="flex-col self-stretch group_7">
	            <view class="shrink-0 self-center section_7"></view>
	            <image
	              class="shrink-0 self-end image_9"
	              src="https://ide.code.fun/api/image?token=678483434ae84d00122350a5&name=08d50c4e425287ea6de6a3f082ddb472.png"
	            />
	          </view>
	          <view class="flex-col self-stretch group_8">
	            <text class="text text_7">请开启Gabblebean</text>
	            <view class="flex-col justify-start items-center relative group_9 mt-9">
	              <view class="flex-col section_8">
	                <view class="self-end section_9"></view>
	                <view class="self-center section_10"></view>
	                <image
	                  class="self-center image_13"
	                  src="https://ide.code.fun/api/image?token=678483434ae84d00122350a5&name=2bc84aa2bd6608084a0b04894191128e.png"
	                />
	              </view>
	              <image
	                class="image_10 pos_3"
	                src="https://ide.code.fun/api/image?token=678483434ae84d00122350a5&name=1a3d313e7b97ea32144045b8f4d80d55.png"
	              />
	              <view class="flex-col justify-start items-end image-wrapper pos_2">
	                <image
	                  class="image_11"
	                  src="https://ide.code.fun/api/image?token=678483434ae84d00122350a5&name=c2eaae5414d7827ef23297b0a0c78d5c.png"
	                />
	              </view>
	              <image
	                class="image_12 pos_4"
	                src="https://ide.code.fun/api/image?token=678483434ae84d00122350a5&name=09bf7eefde2612106ebf38268dcd6950.png"
	              />
	            </view>
	          </view>
	          <text class="self-center text text_8">按住背面电源键3秒开机</text>
	          <view class="flex-col self-stretch group_10">
	            <text class="self-center font_2 text">请确保已经打开以下权限</text>
	            <view class="flex-col self-stretch relative group_11">
	              <view class="flex-row items-center">
	                <image
	                  class="image_14"
	                  src="https://ide.code.fun/api/image?token=678483434ae84d00122350a5&name=6e3d96d2249b0fd5ec787abeb4b60ceb.png"
	                />
	                <text class="font_2 text ml-6">定位权限</text>
	              </view>
	              <view class="flex-row items-center relative group_12">
	                <image
	                  class="image_14"
	                  src="https://ide.code.fun/api/image?token=678483434ae84d00122350a5&name=ff9bae455072158eb17c1ef909cccfea.png"
	                />
	                <text class="font_2 text ml-6">蓝牙</text>
	              </view>
	            </view>
	          </view>
	          <view class="flex-col justify-start items-center self-stretch text-wrapper">
	            <text class="text text_9">我已打开</text>
	          </view>
	        </view>
	      </view>
	    </view>
	    <text class="self-start text text_10 mt-13-5">故事大王</text>
	  </view>
  </view>
</template>

<script>
  export default {
    data() {
      return {
        
      };
    }
  }
</script>

<style lang="scss" scoped>

.mt-22-5 {
  margin-top: 22.5px;
}
.ml-85 {
  margin-left: 85px;
}
.mt-9 {
  margin-top: 9px;
}
.ml-5-5 {
  margin-left: 5.5px;
}
.ml-7 {
  margin-left: 7px;
}
.mt-13-5 {
  margin-top: 13.5px;
}
.page {
  background-color: #f7f7f7;
  width: 100%;
  overflow-y: auto;
  overflow-x: hidden;
  height: 100%;
}
.group {
  padding-bottom: 405px;
}
.section {
  padding: 17.5px 3.5px 112.5px;
  background-image: linear-gradient(180deg, #fed24f 0%, #feb452 100%);
  border-radius: 0px 0px 30px 30px;
}
.group_2 {
  padding: 0 5.5px;
}
.group_3 {
  border-radius: 16px;
  width: 33.5px;
  height: 13.5px;
}
.image_4 {
  width: 24px;
  height: 9px;
}
.group_4 {
  margin-right: 6.5px;
}
.image {
  width: 19px;
  height: 12px;
}
.image_2 {
  width: 17.5px;
  height: 12.5px;
}
.image_3 {
  width: 27.5px;
  height: 13px;
}
.section_3 {
  padding: 14px 14.5px 14px;
  background-color: #fefff999;
  border-radius: 30px;
  backdrop-filter: blur(6.5px);
  height: 40px;
  border: solid 0.5px #ffffff;
}
.image_6 {
  width: 12px;
  height: 6px;
}
.image_5 {
  margin-right: 6px;
  border-radius: 50%;
  width: 29px;
  height: 29px;
}
.image_7 {
  filter: drop-shadow(
    -1.5px 4px 5px #c77e001a,
    -6px 16.5px 9px #c77e0017,
    -14px 36.5px 12px #c77e000d,
    -24.5px 65px 14px #c77e0003,
    -38.5px 102px 15.5px #c77e0000
  );
  width: 151.5px;
  height: 152px;
}
.group_5 {
  margin: 31.5px 20px 0 -5px;
}
.group_6 {
  margin-top: 19.5px;
}
.section_4 {
  padding: 8.5px 9.5px 8.5px 10px;
  background-color: #fff5e3;
  border-radius: 30px;
  height: 25.5px;
}
.image_8 {
  width: 18px;
  height: 8.5px;
}
.font {
  font-size: 10px;
  font-family: DIN;
  color: #674d00;
}
.section_5 {
  padding: 6.5px 12px;
  background-color: #fff5e3;
  border-radius: 30px;
  height: 25.5px;
}
.section_2 {
  padding-top: 238.5px;
  background-color: #00000099;
}
.pos {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
}
.section_6 {
  padding: 13px 15px 11.5px;
  border-radius: 30px 30px 0px 0px;
  background-image: url('https://ide.code.fun/api/image?token=678483434ae84d00122350a5&name=cc3c3b9b1401226c9ef54eed1c784184.png');
  background-size: 100% 100%;
  background-repeat: no-repeat;
}
.group_7 {
  height: 30px;
}
.section_7 {
  background-color: #c5c5c5;
  width: 50px;
  height: 7px;
}
.image_9 {
  margin-top: -5px;
  width: 28px;
  height: 28px;
}
.group_8 {
  margin-top: 36px;
  padding-left: 79.5px;
  padding-right: 74px;
}
.group_9 {
  padding-top: 75.5px;
}
.section_8 {
  padding: 11px 23.5px 32.5px;
  background-image: url('https://ide.code.fun/api/image?token=678483434ae84d00122350a5&name=dd1bb39787dc650d7346175e18cb723c.png');
  background-size: 100% 100%;
  background-repeat: no-repeat;
}
.section_9 {
  margin-right: 9.5px;
  background-color: #d9d9d9;
  border-radius: 50%;
  width: 3.5px;
  height: 3.5px;
}
.section_10 {
  margin-top: 3px;
  background-color: #dbdbdb;
  border-radius: 50%;
  width: 20.5px;
  height: 20.5px;
  border: solid 0.5px #a2a2a2;
}
.image_13 {
  margin-top: 12.5px;
  width: 49px;
  height: 22px;
}
.image_10 {
  width: 67px;
  height: 48px;
}
.pos_3 {
  position: absolute;
  right: 19px;
  top: 34.5px;
}
.image-wrapper {
  padding: 49px 0 8.5px;
  background-image: url('https://ide.code.fun/api/image?token=678483434ae84d00122350a5&name=2d8531df3bc88a9b0917c0df98e040e8.png');
  background-size: 100% 100%;
  background-repeat: no-repeat;
  width: 81.5px;
}
.pos_2 {
  position: absolute;
  left: 42.5px;
  top: 0;
}
.image_11 {
  margin-right: 5.5px;
  width: 23.5px;
  height: 20px;
}
.image_12 {
  width: 70px;
  height: 62px;
}
.pos_4 {
  position: absolute;
  right: 16.5px;
  bottom: 46.5px;
}
.group_10 {
  margin-top: 25px;
  height: 81.5px;
}
.font_2 {
  font-size: 14px;
  font-family: PingFang SC;
  line-height: 30.5px;
  color: #909399;
}
.text {
  text-transform: capitalize;
}

.text_8 {
  margin-top: 34px;
  color: #4f4f4f;
  font-size: 16px;
  font-family: PingFang SC;
  line-height: 15px;
}
.text_7 {
  color: #000000;
  font-size: 22px;
  font-family: PingFang SC;
  font-weight: 700;
  line-height: 20.5px;
}
.text_5 {
  margin-right: 1.5px;
  line-height: 9px;
}
.text_6 {
  line-height: 7.5px;
}
.text_4 {
  margin-top: 9.5px;
  color: #a57b00;
  font-size: 13px;
  font-family: PingFang SC;
  line-height: 20.5px;
}
.text_3 {
  color: #6f4b00;
  font-size: 22px;
  font-family: ZiZhiQuXiMaiTi;
  line-height: 18.5px;
}
.text_2 {
  color: #bba25b;
  font-size: 15px;
  font-family: PingFang SC;
  line-height: 11px;
}
.group_11 {
  margin-top: -5px;
}
.image_14 {
  margin-left: 96px;
  width: 13px;
  height: 13px;
}
.group_12 {
  margin-top: -5px;
}
.text-wrapper {
  margin-top: 31.5px;
  padding: 16.5px 0 16px;
  background-image: linear-gradient(180deg, #fed24f 0%, #feb452 100%);
  border-radius: 45px;
}
.text_9 {
  color: #ffffff;
  font-size: 19px;
  font-family: PingFang SC;
  font-weight: 800;
  line-height: 17.5px;
}
.text_10 {
  margin-left: 103px;
  color: #332869;
  font-size: 16px;
  font-family: PingFang SC;
  font-weight: 700;
  line-height: -13px;
}
</style>
    
      